<template>
	<view class="formback">
		<view class="searchs" v-if="actived > 0">
			<view class="inputview">
				<view class="input">
					<view class="inputIcon">
						<uni-icons style="color: brown;margin-right: 10rpx;" type="loop" size="20"
							@click="iconclick"></uni-icons>
					</view>
					<input type="text" v-model="queryParams.name" />

				</view>
				<view class="inputTitel" @click="onClick">
					搜索
				</view>
			</view>
		</view>

		<view class="background-f borderradius content" v-show="TradeUnionList.length>0" style="padding: 10rpx;">
			<TreeNode v-for="(item, index) in TradeUnionList" :key="item.id" :node="item" @handleNodeChange="queryNode"
				@selectNode="seleceNodeRow" />
		</view>

		<view class="background-f borderradius content" v-show="TradeUnionList.length==0" style="padding: 10rpx;">
			<image class="kong" src="../static/images/kongzhuangtai.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		laborUnionInformationByName,
		listTradeUnion,
		listTSelectRadeUnion
	} from '@/api/work/tradeUnion';
	import TreeNode from '@/components/tradeUnionComponents.vue';

	export default {
		components: {
			TreeNode
		},
		data() {
			return {
				actived: 1,
				TradeUnionList: [],
				copyTradeUnionList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 99999999,
					name: null,
				},
			};
		},
		created() {

			this.getList();

		},
		methods: {

			iconclick() {
				this.queryParams.name
				this.getList();
			},

			seleceNodeRow(row) {
				this.$emit("selectUnionRow", row);
			},
			onClick() {
				console.log("Icon clicked");
				laborUnionInformationByName({
					name: this.queryParams.name
				}).then(res => {
					const newNodes = res.data;
					// const flatTree = this.flattenTree(this.TradeUnionList);
					const updatedTree = this.unionHandleTree(newNodes);
					this.TradeUnionList = updatedTree;
					console.log(this.TradeUnionList, "Updated TradeUnionList");
				});
			},
			queryNode(row) {
				console.log(row.name, row.id, row.isBottomNode, "当前数据");
				listTSelectRadeUnion(row.id).then(res => {
					const newNodes = res.data;
					const flatTree = this.flattenTree(this.TradeUnionList);
					const existingIds = new Set(flatTree.map(node => node.id));
					const filteredNewNodes = newNodes.filter(node => !existingIds.has(node.id));
					const updatedTree = this.unionHandleTree([...flatTree, ...filteredNewNodes]);
					this.TradeUnionList = updatedTree;
					console.log(this.TradeUnionList, "Updated TradeUnionList");
				});
			},
			getList() {
				listTradeUnion(this.queryParams).then(response => {
					this.copyTradeUnionList = response.rows;
					this.TradeUnionList = this.unionHandleTree(response.rows);
					console.log(this.flattenTree(this.unionHandleTree(response.rows)));
				}).catch(err => {
					this.TradeUnionList = [];
				});
			},
			unionHandleTree(data, id = 'id', parentId = 'parentId', children = 'children') {
				let childrenListMap = {};
				let nodeIds = {};
				let tree = [];

				for (let d of data) {
					let pid = d[parentId];

					if (!childrenListMap[pid]) {
						childrenListMap[pid] = [];
					}
					nodeIds[d[id]] = d;
					childrenListMap[pid].push(d);
				}

				// Build the tree
				for (let d of data) {
					let pid = d[parentId];
					if (!nodeIds[pid]) {
						tree.push(d);
					}
				}

				function adaptToChildrenList(o) {
					o[children] = childrenListMap[o[id]] || [];
					for (let c of o[children]) {
						adaptToChildrenList(c);
					}
				}

				for (let t of tree) {
					adaptToChildrenList(t);
				}

				return tree;
			},
			flattenTree(data, id = 'id', parentId = 'parentId', children = 'children') {
				let result = [];

				function recurse(nodes, parentIdValue) {
					nodes.forEach(node => {
						result.push({
							...node,
							[parentId]: parentIdValue
						});

						if (node[children] && node[children].length > 0) {
							recurse(node[children], node[id]);
						}
					});
				}

				recurse(data, null);
				return result;
			},


		}
	}
</script>

<style lang="scss" scoped>
	.kong {
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
	}

	.inputview {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.input {
			font-size: 25rpx;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.inputTitel {
			margin-right: 30rpx;
		}

		.inputTitel:active {
			margin-right: 30rpx;
			color: red;
		}
	}

	.formback {
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 1rpx;
		overflow-y: auto;
		overflow-x: hidden;
		background: rgba(241, 242, 242, 1);
		z-index: 3;
	}

	// .formback::before {
	// 	content: '';
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100%;
	// 	height: 600rpx;
	// 	// background-color: #bd1a2d;
	// 	z-index: -1;
	// }

	.tabs {
		font-weight: 500;
		height: 88rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
	}

	.searchs {
		padding: 32rpx 32rpx;

		::v-deep .is-input-border {
			border-radius: 20px;
			background-color: rgb(189, 26, 45) !important;
			border: 1px solid rgb(189, 26, 45) !important;
		}

		::v-deep .uni-easyinput__content-input {
			border-radius: 17px;
			background-color: #fff !important;
		}

		::v-deep .uniui-search {
			color: #fff !important;
		}
	}

	.content {
		padding: 0;
		margin: 0 30rpx;
		margin-top: 30rpx;
		height: 80%;
	}
</style>